<header fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="10px">
  <div class="input-wrapper paste" #pasteWrapper *ngIf="!isClipboardWatchEnabled">
    <div class="input" fxFlex fxLayout="row" fxLayoutAlign="start center">
      <mat-icon class="clickable" (click)="addToDownload()" title="Download from clipboard">content_paste</mat-icon>
      <input
        #pasteInput
        [formControl]="urlInput"
        placeholder="Paste here track url"
        (focus.silent)="pasteWrapper.classList.add('focused')"
        (blur.silent)="pasteWrapper.classList.remove('focused')"
        (keydown.enter)="addToDownload()"
      />
    </div>
  </div>
  <div class="input-wrapper">
    <div class="input" fxFlex fxLayout="row" fxLayoutAlign="start center">
      <mat-icon>search</mat-icon>
      <input [formControl]="searchInput" placeholder="Search">
      <mat-icon
        *ngIf="searchInput.value && searchInput.value !== ''"
        class="clear-search"
        (click)="clearSearch()"
        title="Clear">
        close
      </mat-icon>
    </div>
  </div>
  <mat-icon class="clickable white" title="Settings" (click)="openSettings()">settings</mat-icon>
</header>

<div class="entries" fxLayout="row wrap" fxLayoutAlign="center start" fxLayoutGap="10px">
  <mat-menu #menu="matMenu">
    <ng-template matMenuContent let-entry="entry" let-idx="idx">
      <button mat-menu-item (click)="remove(entry, idx)">Remove {{ entry.type }}</button>
      <button mat-menu-item *ngIf="entry.track.status === 'failed' || !entry.track.downloaded">Download</button>
    </ng-template>
  </mat-menu>
  <div
    fxFlex
    class="entry"
    [class.lastOfRow]="(idx + 1) % 4 === 0"
    [class.playing]="inPlaybackTrackId === entry.track?.id"
    [class.downloading]="entry.track.status === 'downloading'"
    [ngClass]="entry.type" *ngFor="let entry of filteredEntries; trackBy: trackById; let idx = index;"
    (mouseenter.silent)="onMouseEnter($event, entry)"
    (mouseleave.silent)="onMouseLeave($event, entry)">
    <div class="bg" [ngStyle]="{'background': getBgUrl(entry)}"></div>
    <div class="title">{{ entry.type === 'track' ? entry.track.name : entry.playlist.name }}</div>
    <div class="fg">
      <div class="wrapper">
        <ng-container *ngIf="entry.track.status === 'downloaded'">
          <mat-icon class="clickable" title="Add to playlist">add</mat-icon>
          <mat-icon class="clickable play" (click)="playback(entry)" title="Play">play_circle</mat-icon>
          <mat-icon class="clickable stop" (click)="stop(entry)" title="Stop">stop</mat-icon>
          <mat-icon class="clickable"
            [matMenuTriggerFor]="menu"
            [matMenuTriggerData]="{entry, idx}"
            (menuOpened)="menuOpened()"
            (menuClosed)="menuClosed()"
            title="More">
            more_horiz
          </mat-icon>
        </ng-container>
        <ng-container *ngIf="entry.track.status === 'failed'">
          <mat-icon class="clickable m-auto"
            [matMenuTriggerFor]="menu"
            [matMenuTriggerData]="{entry}"
            (menuOpened)="menuOpened()"
            (menuClosed)="menuClosed()">
            more_horiz
          </mat-icon>
        </ng-container>
        <ng-container *ngIf="entry.track.status === 'processing'">
          <mat-icon class="clickable m-auto" title="Start download" (click)="startDownload(entry)">
            download
          </mat-icon>
        </ng-container>
        <ng-container *ngIf="entry.track.status === 'downloading'">
          <div class="progress-container">
            <div class="spinner-container">
              <span>{{ entry.track.downloadProgress }}%</span>
              <mat-progress-spinner mode="determinate" [value]="entry.track.downloadProgress"></mat-progress-spinner>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>
